<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-aside class="left">
          <div class="ding">
            <img class="touxiang" src="../../public/tx.jpeg" alt="" />
            <p class="name">admin 管理员</p>
          </div>
          <div class="list">
            <Aside :item="show"></Aside>
          </div>
        </el-aside>
        <el-container>
          <el-header class="top flex">
            <div @click="dianji" v-if="show">
              <el-icon><Expand /></el-icon>
            </div>
            <div @click="dianji" v-else>
              <el-icon><Fold /></el-icon>
            </div>

            <div class="but">
              <el-popconfirm title="你确定退出吗?" @confirm="tui">
                <template #reference>
                  <el-button>退出</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-header>
          <el-main class="main">
            <div class="showtime">
              <div class="data_tou">
                <el-breadcrumb separator=">">
                  <el-breadcrumb-item :to="{ path: '/' }"
                    >首页</el-breadcrumb-item
                  >
                  <el-breadcrumb-item v-for="item in barde" :key="item.id">{{
                    item.name
                  }}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入侧边栏
import Aside from '@/components/gongyong.vue';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();
const route = useRoute();
const router = useRouter();
const show = ref(false);
const barde = ref([]) as any;
const mz = ref([]) as any;
//点击左边变形
const dianji = () => {
  show.value = !show.value;
};
//点击退出
const tui = () => {
  sessionStorage.removeItem('token');
  location.reload();
};
//路由监听
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log('watch', newValue);
    barde.value = route.matched;
    let c = route.matched;
    // let a = JSON.parse(JSON.stringify(c));

    // switch (newValue) {
    //   case newValue:
    //     '/users';
    //     user.one = '用户管理';
    //     user.tow = '用户列表';
    //     console.log(123);

    //     break;
    //   case newValue:
    //     '/roles';
    //     user.one = '权限管理';
    //     user.tow = '用户角色';
    //     console.log(13);

    //     break;
    //   case newValue:
    //     '/rights';
    //     user.one = '权限管理';
    //     user.tow = '用户列表';
    //     break;
    //   case newValue:
    //     '/params';
    //     user.one = '商品管理';
    //     user.tow = '用户列表';
    //     break;
    //   case newValue:
    //     '/categories';
    //     user.one = '商品管理';
    //     user.tow = '用户';
    //     break;
    //   case newValue:
    //     '/goods';
    //     user.one = '商品管理';
    //     user.tow = '用户123';
    //     break;
    //   case newValue:
    //     '/orders';
    //     user.one = '订单管理';
    //     user.tow = '订单';
    //     break;
    //   case newValue:
    //     '/reports';
    //     user.one = '数据统计';
    //     user.tow = '数据';
    //     break;

    //   default:
    //     break;
    // }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="less" scoped>
.left {
  height: 100vh;
  background: #304156;
  width: auto;
  .ding {
    margin: 50px 0 0;
    height: 98px;
    text-align: center;

    .touxiang {
      width: 60px;
      height: 60px;
    }
    .name {
      color: #fff;
      font-size: 16px;
      margin: 10px 0;
    }
  }
  .list {
    margin-top: 20px;
  }
}
.top {
  background: #f1f1f1;
}
.main {
  .showtime {
    width: 100%;

    background-color: #f1f1f1;
    border-radius: 10px;
    padding: 10px;
    padding-bottom: 100px;
    box-sizing: border-box;
  }
}
.data_tou {
  margin-bottom: 20px;
}
</style>
